<template>
    <div class="motiva">
        <!--头部 -->
         <div class="name" @click="$router.go(-1)">书程小驿</div>
         <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index"> 
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <h1>图书精选</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="../assets/mx.jpg"  height="300" /> </td>
    <td align="center"><img src="../assets/xwtx.jpg" height="300" /></td>
    <td align="center"><img src="../assets/xwdr.jpg" height="300" /></td>
     <td align="center"><img src="../assets/dxmx.jpg" height="300" /></td>
 
    
  </tr>
  <tr>
    <td align="center"><h1>梦想同行</h1><br>吴奇俊 著<el-collapse >
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>坚持不懈<br>无所畏惧<br>努力奋斗<br>只要我们活着一天我们就应该坚持不懈的奋斗！</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>万夫莫开</h1><br>袁美美 著<el-collapse  >
      <!-- @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>一人立志，万夫莫及。<br>大丈夫身于天地之间，何必抑郁久居如下<br>我们应该胸怀大志，以天下苍生为主。

　　</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>敢为人先</h1>吃天鹅的癞蛤蟆 著<el-collapse  >
      <!-- @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>敢为人先，谁敢争锋。<br>沧海成尘，雷电枯竭，<br>那一缕幽雾又一次临近大地，<br>世间的枷锁被打开了，<br>一个全新的世界就此揭开神秘的一角……
    </div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>大梦想</h1>谭云清（200斤) 著<el-collapse >
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>人的一生总归要有梦想。<br>沧海成尘，雷电枯竭，<br>那一缕幽雾又一次临近大地，<br>世间的枷锁被打开了，<br>一个全新的世界就此揭开神秘的一角……
    </div>
  </el-collapse-item>
  </el-collapse></td>
  
  
  
   
    

  </tr>
</table>
        </div>
        <el-divider></el-divider>
        <h1>特别精选</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="../assets/ygcy.jpg"  height="300" /> </td>
    <td align="center"><img src="../assets/fd.jpg" height="300" /></td>
    <td align="center"><img src="../assets/zjszj.png" height="300" /></td>
     <td align="center"><img src="../assets/dmx.jpg" height="300" /></td>
 
    
  </tr>
  <tr>
    <td align="center"><h1>勇敢超越</h1><br>肖海霞 著<el-collapse>
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>我们每一个人心中都有一个软弱的自己<br>我们要直面自己脆弱的一面<br>努力奋斗<br>只要我们活着一天我们就应该坚持不懈的奋斗！</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>奋斗</h1><br>肖莲莲 著<el-collapse >
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>人的一生不要软弱要奋斗<br>大丈夫身于天地之间，何必抑郁久居如下<br>我们应该努力奋斗，以天下苍生为主。

　　</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>你就是主角</h1>喜欢莲莲 著<el-collapse >
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>男儿应该当自强。<br>自强面对世界<br>那一缕幽雾又一次临近大地，<br>世间的枷锁被打开了，<br>一个全新的世界就此揭开神秘的一角……
    </div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>我们的梦想</h1>谭云清（300斤) 著<el-collapse >
      <!--  @change="handleChange" -->
  <el-collapse-item title="简介" name="1">
    <div>人的一生总归要有梦想。<br>沧海成尘，雷电枯竭，<br>那一缕幽雾又一次临近大地，<br>世间的枷锁被打开了，<br>一个全新的世界就此揭开神秘的一角……
    </div>
  </el-collapse-item>
  </el-collapse></td>
  
  
  
   
    

  </tr>
</table>
        </div>
</div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
         carousel: [],
        
    };
    },
    methods: {
    
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
     this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}
</style>
